<%= render "navbar"%>

<div class="vip_profile">
  <span class="avatar" style="background-image: url('http://7i7g8l.com1.z0.glb.clouddn.com/692aba4e48763b27cfa71a579a86a31d20a9b0cf-cdea879f38477d779e1f5cce0535d8b144241804.png')"></span>
  <h4 class="name">Angelbaby</h4>
  <div class="container">
    <div class="row">
      <div class="col-md-offset-3 col-md-2 col-xs-12 info">收藏课程：<span class="num">8</span></div>
      <div class="col-md-2 col-xs-12 info">会员卡剩余次数：<span class="num">8</span></div>
      <div class="col-md-2 col-xs-12 info">距离有效天数：<span class="num">8</span></div>
    </div>
  </div>
</div>

<div class="vip_desc container">
  <h2>你还等什么！</h2>
  <p>西瓜会员卡是集宁波各类兴趣课程于一体的消费型会员卡。</p>
  <p>凭此卡可以免费预约参加各种优惠课程。</p>
  <p>不论是情侣约会，还是基友玩耍，在西瓜会员卡里都有你想要的好去处！</p>
  <p>这是一张无所不能的卡，只有你想不到，没有我们做不到！</p>
  <a href="#" class="buy_button">立即购买</a>
  <div class="row">
    <div class="col-md-4 col-xs-12 card_prize">
      <a href="#"><img src="http://7i7g8l.com1.z0.glb.clouddn.com/247f851a00cd094e185c8dfa79b73a4211cc7225-6b2425e3f071b9416805928e4a44941e3b93d89a.png" alt=""></a> 
      <span class="remark">有效时间:<span class="num">180</span>天 &nbsp; 有效次数:<span class="num">3</span>次</span>
      <a href="#" class="buy">立即购买</a>
    </div>
    <div class="col-md-4 col-xs-12 card_prize">
      <a href="#"><img src="http://7i7g8l.com1.z0.glb.clouddn.com/0d232eb22384012ba3d419ac9ed6dcdeaca12aba-36251efb0a7d5c9d04cf91ca70fa05b08aa88615.png" alt=""></a> 
      <span class="remark">有效时间:<span class="num">180</span>天 &nbsp; 有效次数:<span class="num">12</span>次</span>
      <a href="#" class="buy">立即购买</a>
    </div>
    <div class="col-md-4 col-xs-12 card_prize">
      <a href="#"><img src="http://7i7g8l.com1.z0.glb.clouddn.com/167342c90f4650184da159c2082e425ae640f0e6-a32866d64e052c5adf2c8067f91f663efedc0296.png" alt=""></a> 
      <span class="remark">有效时间:<span class="num">180</span>天 &nbsp; 有效次数:<span class="num">无限</span>次</span>
      <a href="#" class="buy">立即购买</a>
    </div>
  </div>
</div>

<div class="vip_class_classify container">
  <h2>课程展示</h2>
  <div class="classify_item">
    <span class="item active">课程分类</span>
    <span class="item">摄影</span>
    <span class="item">摄影</span>
    <span class="item">摄影</span>
    <span class="item">摄影</span>
    <span class="item">摄影</span>
    <span class="item">摄影</span>
  </div>
  <div class="class_sort">
    <span class="item active">最新</span>
    <span class="item">最热</span>
  </div>
</div>

<div class="vip_class_container container">
  <div class="row">
  <% 10.times.each do |i| %>
    <div class="col-md-4 col-xs-12 class_item">
      <img src="http://7i7g8l.com1.z0.glb.clouddn.com/692aba4e48763b27cfa71a579a86a31d20a9b0cf-cdea879f38477d779e1f5cce0535d8b144241804.png" alt="">
      <h3 class="class_title">钢琴</h3>
      <p class="class_addr">地址：宁波市海宁波市海曙曙</p>
      <a href="#" class="class_buy">购买一次</a>
      <a href="#" class="class_consult">咨询</a>
    </div>
  <% end %>
  </div>
  <div class="vip_pagination">
    <a href="#" class="item">首页</a>
    <a href="#" class="item">上一页</a>
    <a href="#" class="item active">1</a>
    <a href="#" class="item">2</a>
    <a href="#" class="item">下一页</a>
    <a href="#" class="item">尾页</a>
  </div>
</div>
